<template>
  <div>
    <el-card>
      <!-- 面包屑导航 -->
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>API接口</el-breadcrumb-item>
        <el-breadcrumb-item>我的API</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="api_main">
        <div class="api_main_item">
          <div class="api_title">【上传图像】</div>
          <table class="api_main_table">
            <tbody class="api_main_tbody">
              <td>功能</td>
              <td>接口</td>
            </tbody>
            <tr>
              <td>请求方式</td>
              <td>POST</td>
            </tr>
            <tr>
              <td>请求地址</td>
              <td>fileimg</td>
            </tr>
          </table>

          <div class="api_title_item">请求参数：</div>
          <table class="api_main_table">
            <tbody class="api_main_tbody">
              <td>参数名</td>
              <td>参数类型</td>
              <td>必填</td>
              <td>说明</td>
            </tbody>
            <tr>
              <td>file</td>
              <td>file</td>
              <td>是</td>
              <td>图像文件</td>
            </tr>
            <tr>
              <td>key</td>
              <td>String</td>
              <td>是</td>
              <td>Key值</td>
            </tr>
          </table>

          <div class="api_title_item">响应参数：</div>
          <table class="api_main_table">
            <tbody class="api_main_tbody">
              <td>参数名</td>
              <td>参数类型</td>
              <td>说明</td>
            </tbody>
            <tr>
              <td>path</td>
              <td>String</td>
              <td>图像在服务器的相对路径</td>
            </tr>
            <tr>
              <td>url</td>
              <td>String</td>
              <td>图像的地址</td>
            </tr>
            <tr>
              <td>size</td>
              <td>Number</td>
              <td>图像的大小单位是 KB</td>
            </tr>
          </table>

          <div class="api_title_item">响应数据：</div>
          <pre class="api_resData">
            
    // 成功案例
  {
     "data": {
          "path": "/xioake/agS5MrG1C4.jpg",
          "url": "http://localhost:8888/xioake/agS5MrG1C4.jpg",
          "size": "1082.60kb",
      },
      "meta": {
          "msg": "上传成功！",
          "status": 200
      }
  }

</pre
          >
          <pre class="api_resData">
            
    // 失败
  {
     "data": null,
      "meta": {
          "msg": "图片格式不合格！",
          "status": 400
      }
  }

</pre
          >
        </div>
        <div class="api_main_item">
          <div class="api_title">【删除图像】</div>
          <table class="api_main_table">
            <tbody class="api_main_tbody">
              <td>功能</td>
              <td>接口</td>
            </tbody>
            <tr>
              <td>请求方式</td>
              <td>DELETE</td>
            </tr>
            <tr>
              <td>请求地址</td>
              <td>delimg</td>
            </tr>
          </table>

          <div class="api_title_item">请求参数：</div>
          <table class="api_main_table">
            <tbody class="api_main_tbody">
              <td>参数名</td>
              <td>参数类型</td>
              <td>必填</td>
              <td>说明</td>
            </tbody>
            <tr>
              <td>id</td>
              <td>Int</td>
              <td>是</td>
              <td>图片ID</td>
            </tr>
            <tr>
              <td>key</td>
              <td>String</td>
              <td>是</td>
              <td>Key值</td>
            </tr>
          </table>

          <div class="api_title_item">响应数据：</div>
          <pre class="api_resData">
            
    // 成功案例
  {
     "data": null,
      "meta": {
          "msg": "删除成功！",
          "status": 200
      }
  }

</pre
          >
          <pre class="api_resData">
            
    // 失败
  {
     "data": null,
      "meta": {
          "msg": "文件不存在！",
          "status": 400
      }
  }

</pre
          >
        </div>
        <div class="api_main_item">
          <div class="api_title">【获取图像】</div>
          <table class="api_main_table">
            <tbody class="api_main_tbody">
              <td>功能</td>
              <td>接口</td>
            </tbody>
            <tr>
              <td>请求方式</td>
              <td>GET</td>
            </tr>
            <tr>
              <td>请求地址</td>
              <td>getimg</td>
            </tr>
          </table>

          <div class="api_title_item">请求参数：</div>
          <table class="api_main_table">
            <tbody class="api_main_tbody">
              <td>参数名</td>
              <td>参数类型</td>
              <td>必填</td>
              <td>说明</td>
            </tbody>
            <tr>
              <td>pagenum</td>
              <td>Int</td>
              <td>是</td>
              <td>从指定页开始获取,默认起始为 1</td>
            </tr>
            <tr>
              <td>pagesize</td>
              <td>Int</td>
              <td>是</td>
              <td>每页显示的图片数,默认起始为 5</td>
            </tr>
            <tr>
              <td>key</td>
              <td>String</td>
              <td>是</td>
              <td>Key值</td>
            </tr>
          </table>

          <div class="api_title_item">响应参数：</div>
          <table class="api_main_table">
            <tbody class="api_main_tbody">
              <td>参数名</td>
              <td>参数类型</td>
              <td>说明</td>
            </tbody>
            <tr>
              <td>total</td>
              <td>Int</td>
              <td>图像总条数</td>
            </tr>
            <tr>
              <td>file</td>
              <td>Array</td>
              <td>图像数据列表</td>
            </tr>
            <tr>
              <td>id</td>
              <td>int</td>
              <td>图像ID</td>
            </tr>
            <tr>
              <td>id</td>
              <td>int</td>
              <td>图像ID</td>
            </tr>
            <tr>
              <td>img_name</td>
              <td>String</td>
              <td>图像名称</td>
            </tr>
            <tr>
              <td>img_path</td>
              <td>String</td>
              <td>图像在服务器的相对路径</td>
            </tr>
            <tr>
              <td>img_size</td>
              <td>Number</td>
              <td>图像大小 单位 KB</td>
            </tr>
            <tr>
              <td>img_data</td>
              <td>Data</td>
              <td>图像上传日期</td>
            </tr>
            <tr>
              <td>img_url</td>
              <td>String</td>
              <td>图像地址</td>
            </tr>
          </table>

          <div class="api_title_item">响应数据：</div>
          <pre class="api_resData">
    // 成功案例            
  {
      "data": {
          "total": 6,
          "file": [
              {
                  "id": 62,
                  "user_id": 1,
                  "img_name": "Chhoyp4icr.jpg",
                  "img_path": "/admin/z97rlhAW9c.jpg",
                  "img_size": 796.59,
                  "img_data": "2021-02-04T07:17:21.000Z",
                  "img_url": "http://localhost:8888/admin/z97rlhAW9c.jpg"
              },
          ]
      },
      "meta": {
          "msg": "获取成功！",
          "status": 200
      }
  }

</pre
          >
          <pre class="api_resData">
            
    // 失败
  {
     "data": null,
      "meta": {
          "msg": "当前页码没有数据！",
          "status": 400
      }
  }

</pre
          >
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.api_main {
  margin: 20px 0;
}
.api_title {
  font-size: 23px;
  border-bottom: 1px solid #ddd;
  padding: 10px 0;
}
.api_item_li {
  padding: 5px 0;
}
.api_main_table {
  margin-top: 15px;
  width: 100%;
  /* border: 1px solid #ddd; */
  border-collapse: collapse;
  border-spacing: 0; /*去掉单元格间隙*/
}
.api_main_table td,
.api_main_table th {
  border: 1px solid #e6e6e6;
  height: 39px;
  font-weight: 500;
  text-indent: 1em;
  font-size: 14px;
  color: #666;
}
.api_main_tbody td {
  background: #f2f2f2;
}
.api_title_item {
  margin-top: 10px;
  font-size: 16px;
  font-weight: 500;
  color: #666;
}
.api_resData {
  margin-top: 15px;
  background: #f2f2f2;
  color: #666;
  border: 1px solid #e6e6e6;
  overflow: hidden;
  overflow-x: auto;
}
</style>
